<template>
  <div class="login-box">
    <el-card class="box-card">
      <div ref="header" slot="header" class="clearfix header">
        黑马面经运营后台
      </div>

      <!-- model这个属性很重要，它是跟表单绑定的对象，要想拿到表单的值，必须先给form加一个model属性做绑定 -->
      <el-form ref="form" class="form" :rules="rules" label-position="top" label-width="80px" :model="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="form.password"></el-input>
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="doLogin">登录</el-button>
          <el-button @click="$refs.form.resetFields()">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { loginAPI } from '@/api/user'
export default {
  name: 'LoginIndex',
  data () {
    return {
      count: localStorage.getItem('count'),
      // 跟表单绑定的对象
      form: {
        username: '',
        password: ''
      },
      // 校验规则对象
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 5, max: 11, message: '请输入5-11位账号', trigger: ['change', 'blur'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 11, message: '请输入5-11位字符', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    async doLogin () {
      // 缺点1：代码长
      // // 缺点2：明明.form是el-form组件，但是它找到的不是组件而是一个dom元素
      // console.log(document.querySelector('.header'))
      // console.log(document.querySelector('.form'))

      // vue推荐找元素的方式
      // console.log(this.$refs.header)
      // console.log(this.$refs.form)

      // 回调函数写法
      // this.$refs.form.validate(v => {
      //   if (v) {
      //     // 参数如果为true代表校验通过
      //     // 可以发请求
      //     alert('submit!')
      //   }
      // })

      // 如果不传回调函数，它返回的是promise对象
      // this.$refs.form.validate()
      //   .then(res => {
      //     console.log('通过', res)
      //   })
      //   .catch(() => {
      //     console.log('没通过')
      //   })

      try {
        await this.$refs.form.validate()
        // 能执行await后面代码就证明校验成功
        const res = await loginAPI(this.form)
        this.$store.commit('user/setToken', res.data.token)
        this.$message.success('登录成功')
        // 进行跳转
        this.$router.push('/')
      } catch {
        // 要再单独判断到底是哪个错，如果是请求错才弹出提示，麻烦
        // 以后我这个项目肯定还要发别的请求，别的请求也可能会请求失败
        // 那么也得加catch弹出错误提示，所以最好去响应拦截里的错误拦截
        // 做一个统一的处理
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center / cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .box-card {
    width: 450px;
    ::v-deep .el-card__header {
      // 默认情况下，如果你加了scoped，代表这个样式只能给当前组件写过的标签用
      // 也就是说某个标签如果是组件内部的标签是无法作用到的
      // 要想样式能作用到组件内部，就要用深度作用选择器
      // 有些不专业的叫法叫样式穿透
      padding: 0 !important;
      .header {
        text-align: center;
        background-color: #727cf5;
        height: 80px;
        color: #fff;
        font-size: 18px;
        line-height: 80px;
      }
    }
  }
}
</style>
